<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>隐患处理</title>
    <script th:src="@{/layui1/layui.js}"></script>
    <link rel="stylesheet" th:href="@{/layui1/css/layui.css}">
</head>

<style type="text/css">
    .layui-table-cell {
        height: auto;
        line-height: 100px;
    }
    th .layui-table-cell {
        height: 30px;
        line-height: 30px;
    }
</style>

<body>
<!-- 右操作栏 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-radius layui-btn-danger" lay-event="del">处理</a>
</script>

<!-- 数据表格 -->
<table id="dangerTable" class="layui-table-cell" lay-filter="test"></table>

</body>
<script>

    layui.use(['table', 'form', 'layer','laydate','jquery'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;

        //执行table
        var mytable = table.render({
            elem: '#dangerTable'
            , height: 655
            , url: '/danger/findDanger' //数据接口
            , id: 'tableReload'//利用id重载数据表格
            , title: '隐患处理表'
            , toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , page: true //开启分页
            , skin: 'row'
            , even: true
            , limit: 10
            , limits: [5, 10, 15, 30, 50, 80]
            , cols: [
                [ //表头
                    {field: 'dangerId', title: '编号', width: '5%', align: 'center'}
                    , {field: 'description', title: '隐患描述', width: '15%', align: 'center'}
                    , {field: 'img', title: '隐患实拍图片', width: '24%', align: 'center',templet: function (d) {
                        return "<img src='"+d.img+"' width='100px;' height='100px;'>"
                    }}
                    , {field: 'petrolStationName', title: '所属加油站', width: '11%', align: 'center'}
                    , {field: 'userName', title: '巡检人', width: '8%', align: 'center'}
                    , {field: 'optionName', title: '所属巡检项', width: '10%', align: 'center'}
                    , {field: 'taskName', title: '所属巡检计划', width: '10%', align: 'center'}
                    , {field: 'status', title: '状态', width: '7%', align: 'center', templet: function (d) {
                        if (d.status == 0) {
                            return "<button class='layui-btn layui-btn-sm layui-btn-radius layui-btn-danger'>未处理</button>"
                        } else {
                            return "<button class='layui-btn layui-btn-sm layui-btn-radius'>已处理</button>"
                        }
                    }}
                    , {fixed: 'right', title: '处理', width: '10%', align: 'center', toolbar: '#barDemo'}
                ]]
        });


        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 的lay-filter="对应值"属性
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'del'){
                if (data.status==1) {
                    layer.msg("隐患已处理，无需重复处理");
                    return
                }
                layer.confirm('确定该隐患已处理吗', function(index){
                    //obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送请求
                    $.ajax({
                        url: '/danger/handleDanger?dangerId='+data.dangerId,
                        dataType: 'json',
                        type: 'GET',
                        //data: {"id": data.id},//将js对象转成json串传入到后台
                        success: function (result) {
                            layer.closeAll();//关闭对话框
                            layer.msg(result.msg);
                            mytable.reload();//重新加载表格数据
                        },
                        error:function (result) {
                            layer.msg(result.msg);
                        }
                    })
                });
            }
        });


    });


</script>
</html>